<template>
  <div class="readMeterDetail">
    <!-- 水费 -->
    <div class="title">水费</div>
    <div class="form">
      <!-- 水价 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterPrice"
          inputType="number"
          title="水价"
          company="元/吨"
          placeholder="请输入水价"
          :isInput="false" />
      </div>
      <!-- 上期水表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterPrevUsed"
          inputType="number"
          title="上期水表值"
          company="吨"
          placeholder="请输入上期水表值"
          :isInput="false" />
      </div>
      <!-- 本期水表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.waterNowUsed"
          inputType="number"
          title="本期水表值"
          company="吨"
          placeholder="请输入本期水表值"
          :isInput="true" />
      </div>
    </div>

    <!-- 电费 -->
    <div class="title">电费</div>
    <div class="form">
      <!-- 电价 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electricPrice"
          inputType="number"
          title="电价"
          company="元/度"
          placeholder="请输入电价"
          :isInput="false" />
      </div>
      <!-- 上期电表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electricPrevUsed"
          inputType="number"
          title="上期电表值"
          company="度"
          placeholder="请输入上期电表值"
          :isInput="false" />
      </div>
      <!-- 本期电表值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.electricNowUsed"
          inputType="number"
          title="本期电表值"
          company="度"
          placeholder="请输入本期电表值"
          :isInput="true" />
      </div>
    </div>

    <!-- 燃气费 -->
    <div class="title">燃气费</div>
    <div class="form">
      <!-- 燃气价 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasPrice"
          inputType="number"
          title="燃气价"
          company="元/方"
          placeholder="请输入燃气价"
          :isInput="false" />
      </div>
      <!-- 上期燃气值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasPrevUsed"
          inputType="number"
          title="上期燃气值"
          company="方"
          placeholder="请输入上期燃气值"
          :isInput="false" />
      </div>
      <!-- 本期燃气值 -->
      <div class="form-item">
        <CustomInput
          v-model="formItem.gasNowUsed"
          inputType="number"
          title="本期燃气值"
          company="方"
          placeholder="请输入本期燃气值"
          :isInput="true" />
      </div>
    </div>

    <div class="sure">
      <button class="button" @tap="actionClick">抄表</button>
      <button class="button" @tap="changeClick">更换</button>
      <button class="button" @tap="collectionClick">生成代收水电气费</button>
    </div>

    <i-action-sheet
      show-cancel
      :mask-closable="false"
      :visible="actionVisible"
      :actions="actionDetail"
      @cancel="actionCancel"
      @sure="actionSure">
      <div slot="header" style="padding: 16px">
        <div style="color: #444;font-size: 16px">确定吗？</div>
        <text>将会生成代收水电气费</text>
      </div>
    </i-action-sheet>

    <i-message id="message" />
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { $Message } from '../../../static/iview/base/index'
import { mapState, mapMutations } from 'vuex'
import { ERR_OK } from 'api/config'
import { readMeter, collectionMoney } from 'api/readMeterDetail'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    ...mapState({
      currentItem: state => state.readMeterDetail.currentItem
    })
  },
  mounted () {
    this.initData()
  },
  data () {
    return {
      formItem: {},
      actionVisible: false,
      actionDetail: [
        {
          name: '生成',
          color: '#ed3f14',
          loading: false
        }
      ]
    }
  },
  methods: {
    actionSure (detail) {
      if (this.actionDetail[0].loading) {
        return
      }
      const obj = {
        ids: this.formItem.id
      }

      this.collectionMoney(obj)
    },
    actionCancel () {
      if (this.actionDetail[0].loading) {
        return
      }
      this.actionVisible = false
    },
    changeClick () {
      this.SET_CURRENTITEM(this.currentItem)
      wx.navigateTo({
        url: '/pages/changeMeterDetail/main'
      })
    },
    collectionClick () {
      this.actionVisible = true
    },
    actionClick () {
      const obj = JSON.parse(JSON.stringify(this.formItem))

      this.readMeter(obj)
    },
    initData () {
      this.formItem = JSON.parse(JSON.stringify(this.currentItem))
    },
    async collectionMoney (data) {
      this.actionDetail[0].loading = true

      const res = await collectionMoney(data)

      this.actionDetail[0].loading = false
      this.actionCancel()

      if (res.code === ERR_OK) {
        $Message({
          content: '生成成功',
          type: 'success'
        })
      } else {
        $Message({
          content: (res && res.msg) || '生成失败',
          type: 'error'
        })
      }
    },
    async readMeter (data) {
      this.$showLoading('抄表中')

      const res = await readMeter(data)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '抄表成功',
          success: () => {
            wx.navigateBack()
          }
        })
      } else {
        this.$showToast({
          title: (res && res.msg) || '抄表失败',
          icon: 'none'
        })
      }
    },
    ...mapMutations({
      SET_CURRENTITEM: 'changeMeterDetail/SET_CURRENTITEM'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .readMeterDetail {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    > .title {
      width: 100%;
      line-height: 40px;
      background-color: rgb(248, 248, 248);
      font-size: 14px;
      padding-left: 10px;
    }
    > .form {
      > .form-item {
        border-bottom: 1px solid rgb(238, 238, 238);
      }
    }
    > .sure {
      margin: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      > .button {
        min-width: 80px;
        background-color: $color-default;
        border-radius: 5px;
        color: white;
        font-size: 16px;
      }
    }
  }
</style>
